* {
	/* 
		去掉默认内外边距
	 */
	padding: 0rem;
	margin: 0rem;
}

.top {
	width: 100%;
	height: 10rem;
	background-color: red;
}

.topToolBar1 {
	width: 100%;
	height: 3.125rem;
	position: fixed;
	/**
	  display: flex
	 */
	display: flex;

	align-items: center;

	font-size: 1rem;
	background-color: aquamarine;
	/* 
		solid解决border无法显示的问题
	 */
	border-bottom: 0.125rem solid;
	border-bottom-color: #f2f2f2;
}

.topTab {
	position: fixed;
	width: 100%;
	margin-top: 3.25rem;
	height: 3.125rem;
	background-color: gray;
}

.middle {
	width: 100%;
	height: 16.25rem;
	position: relative;
	background-color: blue;
}

.middle-child1 {
	position: absolute;
	width: 18.75rem;
	height: 12.5rem;
	background-color: #b1f5f0;
}

.middle-child2 {
	position: absolute;
	width: 18.75rem;
	height: 2.5rem;
	background-color: #f3d30e;
	z-index: 30;
}

.middle-child1-1 {
	position: relative;
	width: 10rem;
	height: 5rem;
	background-color: #3c00f3;
}

.middle-child1-2 {
	position: relative;
	z-index: 10;
	width: 8rem;
	height: 3.75rem;
	background-color: #f1680e;
}

.middle-child1-3 {
	position: relative;
	width: 6rem;
	height: 2.5rem;
	left: 1.25rem;
	z-index: 20;
	background-color: #5dfa1d;
}

.middle-child1-4 {
	position: relative;
	width: 4rem;
	height: 2.5rem;
	z-index: 20;
	background-color: #18b9f3;
}

.bottom1 {
	width: 100%;
	height: 10rem;
	bottom: 0;
	background-color: green;
}

.bottom2 {
	width: 100%;
	height: 10rem;
	bottom: 0;
	margin-bottom: 3.125rem;
	background-color: green;
}

.bottomTip {
	position: fixed;
	width: 100%;
	height: 3.125rem;
	background-color: gray;
	/* 
		line-height
		单行文字居中显示
	 */
	/* line-height: 3.125rem; */
	text-align: center;
	vertical-align: middle;
	font-size: 0.875rem;
	bottom: 0;
	padding-left: 0.625rem;
	padding-right: 0.625rem;

	/* 
		解决padding-right没有生效问题
		https://www.cnblogs.com/aoximin/p/13173636.html
		
		box-sizing: border-box
		
		这个属性可以设置：
		内部宽度+padding+border=容器宽度=实际宽度。
		
		比如我设置了宽度为100%，那么个宽度为:父类的宽度(100%)=子类的宽度+padding+border
	 */
	box-sizing: border-box;
}